<template>
  <div>
    <el-table :data="data" border v-loading="loading">
      <el-table-column
        v-for="(col, index) in filteredColumns"
        :key="index"
        v-bind="col"
      >
        <template v-if="col.slot === 'btns'" #header>
          <el-popover placement="bottom" trigger="click" :visible="visible">
            <template #reference>
              <span class="title" @click="visible = true">
                <span>操作</span>
                <el-icon size="16"><ArrowDown /></el-icon>
              </span>
            </template>
            <el-checkbox-group v-model="tempCheckedColumns" size="small">
              <draggable
                v-model="tempAllColumns"
                tag="transition-group"
                item-key="id"
              >
                <template #item="{ element }">
                  <div :key="element">
                    <el-checkbox :label="element"></el-checkbox>
                  </div>
                </template>
              </draggable>
            </el-checkbox-group>
            <div>
              <el-button size="small" @click="checkedCancel">取消</el-button>
              <el-button size="small" type="primary" @click="checkedOK">
                确定
              </el-button>
            </div>
          </el-popover>
        </template>
        <template v-if="col.slot" v-slot="{ row }">
          <slot :name="col.slot" :row="row" />
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      v-if="pagination"
      class="mt-20"
      v-model:current-page="currentPage"
      v-model:page-size="pageSize"
      :total="total"
      :page-sizes="[10, 20, 30, 40]"
      layout="prev, pager, next, jumper, ->, sizes, total"
      @current-change="getDataList"
      @size-change="getDataList"
    ></el-pagination>
  </div>
</template>

<script lang="ts">
export default {
  name: "XTable",
};
</script>

<script lang="ts" setup>
import { ref, onMounted, computed } from "vue";
import { ArrowDown } from "@element-plus/icons-vue";
import draggable from "vuedraggable";

// withDefaults 给 props 数据提供默认值的
const props = withDefaults(
  defineProps<{
    getData: (currentPage: number, pageSize: number) => any;
    pagination?: boolean;
    columns: any;
  }>(),
  {
    pagination: true,
  }
);

const data = ref<any[]>([]);
const loading = ref(false);
const currentPage = ref(1);
const pageSize = ref(10);
const total = ref(0);

const getDataList = async () => {
  loading.value = true;
  const res = await props.getData(currentPage.value, pageSize.value);
  data.value = res.records;
  total.value = res.total;
  loading.value = false;
};

onMounted(getDataList);

const visible = ref(false);
// 选中列
const checkedColumns = ref(props.columns.map((col) => col.label));
// 临时选中列
const tempCheckedColumns = ref(checkedColumns.value);

// 拖拽数据
const allColumns = ref(props.columns.map((col) => col.label));
// 临时数据
const tempAllColumns = ref(props.columns.map((col) => col.label));

// 要渲染的列（过滤）
const filteredColumns = computed(() => {
  // // 过滤
  // const columns = props.columns.filter((col) => {
  //   return checkedColumns.value.includes(col.label);
  // })
  // // 排序

  return allColumns.value
    .filter((label) => {
      return checkedColumns.value.includes(label);
    })
    .map((label) => {
      return props.columns.find((col) => col.label === label);
    });
});

const checkedOK = () => {
  checkedColumns.value = tempCheckedColumns.value;
  allColumns.value = tempAllColumns.value;
  visible.value = false;
};

const checkedCancel = () => {
  tempCheckedColumns.value = checkedColumns.value;
  tempAllColumns.value = allColumns.value;
  visible.value = false;
};
</script>

<style scoped lang="scss">
.mt-20 {
  margin-top: 20px;
}

.title {
  display: flex;
  align-items: center;
  width: 50px;
  justify-content: space-between;
}
</style>
